<template>
 <div>
    <div class="container" @mouseover="isOver = true" @mouseout="isOver = false" v-if="isEdit">
      <div class="left-box">
        <div class="title"><span>{{ index }}、{{ data.questionDesc }}（{{ data.score }}分）</span>
          <span v-if="data.optionType==0" class="colorStye">单选题</span>
          <span v-if="data.optionType==1" class="colorStye">多选题</span>
          <span v-if="data.optionType==2" class="colorStye">判断题</span>
         <!-- <span v-if="data.optionType==3" class="colorStye">案例题</span> -->
        </div>
        <!-- <div v-if="data.questionImg && data.questionImg != ''">
          <img class="img" :src="data.questionImg.url" />
        </div> -->
        <el-row>
          <el-col :span="23">
            <div class="test-box" v-for="(it, key) in data.lists" :key="key">
              <el-radio disabled v-model="it.isTrue" :label="1" v-if="data.optionType == 0 || data.optionType == 2">{{it.answerDesc}}</el-radio>
              <el-checkbox disabled v-model="it.isTrue == 1 " v-if="data.optionType == 1 || data.optionType == 3">{{ it.answerDesc }}</el-checkbox>
              <div>
                <img class="img" v-if="it.answerImg && it.answerImg != ''" :src="it.answerImg.url" />
              </div>
            </div>
          </el-col>
          <el-col :span="1" style="line-height: 45px">
            <!-- <div v-if="data.questionImg && data.questionImg != '' "><el-button type="primary" size="mini" icon="el-icon-view" @click="viewImage()" circle></el-button></div> -->
            <div><el-button type="primary" size="mini" icon="el-icon-edit" @click="edit()" circle></el-button></div>
            <div><el-button type="danger" size="mini" icon="el-icon-delete" @click="del(item.id)" circle></el-button></div>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="right-box">
        <div>
          <el-button type="primary" icon="el-icon-plus" circle @click="add($event)"></el-button>
        </div>
        <div>
          <el-button type="danger" icon="el-icon-delete" circle @click="del()"></el-button>
        </div>
      </div> -->
    </div>
    <!-- 编辑 -->
    <Qsform :item="data" :is-add="isAdd" @setForm="setForm" v-else />
    <!-- 添加 -->
   <Qsform :bank-id="data.bankId" @setForm="setForm" v-if="!isAdd" />
  </div>
</template>

<script>
import Qsform from './Qsform.vue'
import {deleteBankQuesAndOption} from '@/api/business/questionBank'
export default {
  data() {
    return {
      list: [],
      isOver: false,
      isAdd: true,
      isEdit: true,
      data: null,
    }
  },
  props: {
    index: {
      type: Number,
      default: 0,
    },
    item: {
      type: Object,
      default: {},
    },
  },
  components: {
    Qsform,
  },
  watch: {
    item(value) {
      this.data = value
    }
  },
  created() {
     this.data = this.item
    //显示图片，打开注释
    // if (typeof this.data.questionImg == 'string' && this.data.questionImg !== '') {
    //   var list = JSON.parse(this.item.questionImg)
    //   if(list!=null){
    //     this.data.questionImg=list[0];
    //   }
    // }
    this.item.lists.map(r => {
      if (r.answerImg) r.answerImg = JSON.parse(r.answerImg)
    })
  },
  methods: {
    del(id) {
      this.$alert('确定删除题目,删除后不可恢复？', '提示消息', {
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
         this.$emit('del')
        if(id!==null && id!="" && id!=undefined){
          deleteBankQuesAndOption(id).then(res => {
            this.$notify({
              title: '删除成功',
              type: 'success',
              duration: 2500
            })
            this.$parent.init()
          })
        }
      })
    },
    add(e) {
      this.isAdd = false
      this.isEdit = true
    },
    edit() {
      this.isEdit = false
      this.isAdd = true
    },
    setForm(form) {
      this.data = form
      if (!this.isAdd) {
        this.$emit('addForm', {
          index: this.index,
          form,
        })
      } else {
        this.$emit('editForm', {
          index: this.index - 1,
          form,
        })
      }
      this.isEdit = true
      this.isAdd = true
    },
    viewImage(){

    }
  },
}
</script>
<style lang="scss">
  .el-collapse-item__wrap{
    border-bottom: none;
  }
  .el-collapse-item__header{
    border-bottom: none;
  }
  .el-collapse-item__arrow{
    color: #0064be;
    font-weight: 800;
  }
</style>
<style lang="scss" scoped>
  .title{
    font-weight: 600;
    line-height: 22px;
    font-size:15px;
  }
  .colorStye{
    color: #006FD3;
  }
.container {
  padding: 5px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  .left-box {
    width: 100%;
    .test-box {
      margin: 10px;
    }
    .img {
      width: 100px;
      height: 100px;
    }
  }

  .right-box {
    width: 50px;
    z-index: 99;
    position: absolute;
    top: 50px;
    right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
  }

}
</style>
